import React, { useState } from 'react';
import { Search, Plus, Edit, Copy, Archive, MapPin, Users, Clock, Briefcase } from 'lucide-react';

interface Job {
  id: string;
  title: string;
  department: string;
  location: string;
  type: string;
  level: string;
  status: string;
  applicants: number;
  createdAt: string;
  salary: string;
  description: string;
  requirements: string[];
}

const mockJobs: Job[] = [
  {
    id: '1',
    title: '前端工程师',
    department: '技术部',
    location: '上海',
    type: '全职',
    level: '中级',
    status: '招聘中',
    applicants: 15,
    createdAt: '2024-01-10',
    salary: '20-35K',
    description: '负责公司前端产品的开发和维护，参与产品设计和用户体验优化。',
    requirements: ['3年以上前端开发经验', '熟练掌握React/Vue', '熟悉TypeScript', '有移动端开发经验']
  },
  {
    id: '2',
    title: 'Java后端工程师',
    department: '技术部',
    location: '北京',
    type: '全职',
    level: '高级',
    status: '招聘中',
    applicants: 8,
    createdAt: '2024-01-05',
    salary: '25-40K',
    description: '负责后端服务架构设计和开发，参与系统性能优化和技术选型。',
    requirements: ['5年以上Java开发经验', '熟练掌握Spring Boot', '熟悉微服务架构', '有高并发系统经验']
  },
  {
    id: '3',
    title: 'UI/UX设计师',
    department: '设计部',
    location: '深圳',
    type: '全职',
    level: '中级',
    status: '已暂停',
    applicants: 25,
    createdAt: '2023-12-28',
    salary: '15-25K',
    description: '负责产品界面设计和用户体验设计，参与产品原型设计和用户研究。',
    requirements: ['3年以上UI/UX设计经验', '熟练掌握Figma/Sketch', '有B端产品设计经验', '具备用户研究能力']
  }
];

export default function Jobs() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedStatus, setSelectedStatus] = useState('');
  const [selectedJob, setSelectedJob] = useState<Job | null>(null);

  const statuses = ['招聘中', '已暂停', '已关闭'];

  const filteredJobs = mockJobs.filter(job => {
    const matchesSearch = job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         job.department.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = !selectedStatus || job.status === selectedStatus;
    
    return matchesSearch && matchesStatus;
  });

  const getStatusColor = (status: string) => {
    switch (status) {
      case '招聘中': return 'bg-green-100 text-green-800';
      case '已暂停': return 'bg-yellow-100 text-yellow-800';
      case '已关闭': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getLevelColor = (level: string) => {
    switch (level) {
      case '初级': return 'bg-blue-100 text-blue-800';
      case '中级': return 'bg-purple-100 text-purple-800';
      case '高级': return 'bg-orange-100 text-orange-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="sm:flex sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">岗位JD</h1>
          <p className="mt-2 text-sm text-gray-700">
            管理和发布招聘岗位
          </p>
        </div>
        <div className="mt-4 sm:mt-0">
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
            <Plus className="h-4 w-4 mr-2" />
            创建岗位
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className="mt-6 bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="relative">
            <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
            <input
              type="text"
              placeholder="搜索岗位名称、部门..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-9 w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <select
            value={selectedStatus}
            onChange={(e) => setSelectedStatus(e.target.value)}
            className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">所有状态</option>
            {statuses.map(status => (
              <option key={status} value={status}>{status}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Jobs list */}
        <div className="space-y-4">
          {filteredJobs.map((job) => (
            <div
              key={job.id}
              onClick={() => setSelectedJob(job)}
              className={`bg-white rounded-lg shadow-sm border p-6 cursor-pointer transition-all hover:shadow-md ${
                selectedJob?.id === job.id ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200'
              }`}
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-medium text-gray-900">{job.title}</h3>
                <div className="flex items-center space-x-2">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(job.status)}`}>
                    {job.status}
                  </span>
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getLevelColor(job.level)}`}>
                    {job.level}
                  </span>
                </div>
              </div>
              
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div className="flex items-center text-sm text-gray-500">
                  <Briefcase className="h-4 w-4 mr-2" />
                  {job.department}
                </div>
                <div className="flex items-center text-sm text-gray-500">
                  <MapPin className="h-4 w-4 mr-2" />
                  {job.location}
                </div>
                <div className="flex items-center text-sm text-gray-500">
                  <Users className="h-4 w-4 mr-2" />
                  {job.applicants} 位候选人
                </div>
                <div className="flex items-center text-sm text-gray-500">
                  <Clock className="h-4 w-4 mr-2" />
                  {job.createdAt}
                </div>
              </div>
              
              <p className="text-sm text-gray-600 mb-3">{job.description}</p>
              
              <div className="flex items-center justify-between">
                <span className="text-lg font-medium text-green-600">{job.salary}</span>
                <div className="flex items-center space-x-2">
                  <button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                    <Edit className="h-4 w-4" />
                  </button>
                  <button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                    <Copy className="h-4 w-4" />
                  </button>
                  <button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
                    <Archive className="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Job detail */}
        <div className="lg:sticky lg:top-8">
          {selectedJob ? (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-900">{selectedJob.title}</h2>
                <div className="flex items-center space-x-2">
                  <button className="px-3 py-1.5 text-sm text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors">
                    编辑
                  </button>
                  <button className="px-3 py-1.5 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
                    发布
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">基本信息</h3>
                  <dl className="grid grid-cols-2 gap-4">
                    <div>
                      <dt className="text-xs text-gray-500">部门</dt>
                      <dd className="text-sm text-gray-900">{selectedJob.department}</dd>
                    </div>
                    <div>
                      <dt className="text-xs text-gray-500">地点</dt>
                      <dd className="text-sm text-gray-900">{selectedJob.location}</dd>
                    </div>
                    <div>
                      <dt className="text-xs text-gray-500">类型</dt>
                      <dd className="text-sm text-gray-900">{selectedJob.type}</dd>
                    </div>
                    <div>
                      <dt className="text-xs text-gray-500">薪资</dt>
                      <dd className="text-sm text-gray-900">{selectedJob.salary}</dd>
                    </div>
                  </dl>
                </div>
                
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">岗位描述</h3>
                  <p className="text-sm text-gray-700">{selectedJob.description}</p>
                </div>
                
                <div>
                  <h3 className="text-sm font-medium text-gray-900 mb-3">岗位要求</h3>
                  <ul className="space-y-2">
                    {selectedJob.requirements.map((req, index) => (
                      <li key={index} className="flex items-start text-sm text-gray-700">
                        <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                        {req}
                      </li>
                    ))}
                  </ul>
                </div>
                
                <div className="pt-4 border-t border-gray-200">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">创建时间</span>
                    <span className="text-gray-900">{selectedJob.createdAt}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm mt-2">
                    <span className="text-gray-500">申请人数</span>
                    <span className="text-gray-900">{selectedJob.applicants} 人</span>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
              <Briefcase className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">选择岗位查看详情</h3>
              <p className="text-sm text-gray-500">点击左侧岗位卡片查看详细信息</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}